<template>
  <div class="x-autoconfig" v-if="viewModel">
    {{ viewModel }}
  </div>
</template>

<script>
  import ala from 'ala'
  export default {
    model: {
      prop: 'dataModel',
      event: 'change'
    },
    props: {
      dataModel: {},
      type: {}
    },
    data () {
      return {
        viewModel: null
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        if (this.type) {
          var config = await this.$api.configById(this.type, this.dataModel)
          this.viewModel = config.name
        }
      }
    },
    watch: {
      dataModel: {
        deep: true,
        handler (val) {
          this.init()
        }
      }
    }
  }
</script>
